<template>
    <p>
        创建人：
        <el-input v-model="info.createName" style="width: 200px" placeholder="货物名称" />
        创建时间：
        <el-date-picker v-model="info.createDate" type="date" placeholder="请选择日期" format="YYYY/MM/DD"
            value-format="YYYY-MM-DD" />
        审批人：
        <el-input v-model="info.sPApprover" style="width: 200px" placeholder="货物名称" />
       
        <el-button type="primary" @click="ReceivingList(purid)">查询</el-button>
        <el-button @click="chengzhi()">重置</el-button>
    </p>
    
    <p style="background-color: aquamarine;">
        <el-row>
            <el-col :span="4">
                <el-button @click="ReceivingList(purid=0)" style="background-color: aquamarine;">全部</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="ReceivingList(purid=1)" style="background-color: aquamarine;">待审批</el-button>
            </el-col>
            <el-col :span="4">
                <el-button @click="ReceivingList(purid=2)" style="background-color: aquamarine;">已审批</el-button>
            </el-col>
        </el-row>
    </p>
    <el-table :data="tableData" border  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="headline" label="领用标题" />
        <el-table-column prop="purposeDescription" label="用途描述" />
        <el-table-column prop="createName" label="领用人" />
        <el-table-column prop="createDate" label="领用日期">
            <template v-slot="script">
                {{ script.row.createDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="sPReserveNote" label="备注">
            <template v-slot="script">
                <span v-if="script.row.sPReserveNote == 'string' || script.row.sPReserveNote == null">-</span>
                <span v-else>{{ script.row.sPReserveNote }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间">
            <template v-slot="script">
                {{ script.row.createDate.substring(0, 10) }}
                {{ script.row.createDate.substring(11, 19) }}
            </template>
        </el-table-column>
        <el-table-column prop="sPApprovalStatus" label="审批状态">
            <template v-slot="script">
                <span v-if="script.row.sPApprovalStatus == 1">待提交</span>
                <span v-if="script.row.sPApprovalStatus == 10">待审批</span>
                <span v-if="script.row.sPApprovalStatus == 20">已通过</span>
                <span v-if="script.row.sPApprovalStatus == 30">已拒绝</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="审批人">
            <template v-slot="script">
                <span v-if="script.row.sPApprover == 'string' || script.row.sPApprover == null">-</span>
                <span v-else>{{ script.row.sPApprover }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="230">
            <template v-slot="script">
                <a @click="tiaoc(script.row.receivingID, script.row.sPApprovalStatus)">查看</a> &nbsp;
                <el-button :disabled="script.row.sPApprovalStatus>10" @click="spupdate(script.row.receivingID, 20)" type="primary">通过</el-button>
                <el-button :disabled="script.row.sPApprovalStatus>10" @click="spupdate(script.row.receivingID, 30)" type="primary">拒绝</el-button>
            </template>
        </el-table-column>
    </el-table>


    <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="total,slot, sizes"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            ,每页显示{{ page.pageSzen }},共{{ page.pageiden }}/{{ page.pageCount }}页
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot, prev, pager, next"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == 1" @click="page.pageiden = 1">首页</button>
                        </template>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination v-model:current-page="page.pageiden" v-model:page-size="page.pageSzen"
                        :page-sizes="[3, 10, 20, 30, 40]" :background="true" layout="slot,jumper"
                        :total="page.totaCount" prev-text="上一页" next-text="下一页">
                        <template v-slot="script">
                            <button :disabled="page.pageiden == page.pageCount"
                                @click="page.pageiden = page.pageCount">尾页</button>
                        </template>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script setup lang='ts'>
import { reactive, ref, onMounted, watch } from 'vue'
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
//显示列表
const tableData = ref([])
//多选
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
//生命函数钩
onMounted(() => {
    //物资采购显示
    ReceivingList(purid);
})
//条件
let purid=0;
const info = reactive({
    createName: "",//创建人
    createDate: "",//创建时间
    sPApprover: "",//审批人
    sPApprovalStatus: 0,//审批状态
})
//条件重置
const chengzhi = () => {
    info.createName = "";//创建人
    info.createDate = "";// 创建时间
    info.sPApprover = "";//审批人
    info.sPApprovalStatus = 0;//审批状态
    page.pageiden = 1;//页码
    page.pageSzen = 1;//页容量
    ReceivingList(purid)
}
//分页
const page = reactive({
    pageiden: 1,//页码
    pageSzen: 3,//页容量
    totaCount: 0,//总数据
    pageCount: 0//总页码
})
//执行分页
watch(page, () => {
    ReceivingList(purid)
})
//物资领用显示ss
const ReceivingList = (id:number) => {
    axios.get("http://10.223.8.2:8000/ReadMaterial/api/Receiving/ReceivingShowApp", {
        params: {
            pageiden: page.pageiden,
            pageSzen: page.pageSzen,
            createName: info.createName,
            createDate: info.createDate,
            sPApprover: info.sPApprover,
            sPApprovalStatus: id,
        }
    }).then(res => {
        page.totaCount = res.data.data.totaCount;
        page.pageCount = res.data.data.pageCount;
        tableData.value = res.data.data.values;
        console.log(res.data.data)
    }).catch(err => {
        console.log(err)
    })
}
//修改状态http://10.223.8.2:8000/Material/ http://10.223.8.2:8000/ReadMaterial/
const spupdate = (receivingID: number, sPApprovalStatus: number) => {
    axios.post("http://10.223.8.2:8000/Material/api/Receiving/UPdApprovalStatus?receivingID=" + receivingID + "&sPApprovalStatus=" + sPApprovalStatus)
    .then(res=>{
        if (res.data.data > 0) {
        ElMessage.success("提交成功")
        ReceivingList(purid);
      }
      else {
        ElMessage.error("提交失败")
      }
    })
}

const tiaoc=(id:number,status:number)=>{
    if(status==10){
        router.push({
            name: "ReceiveListUpdate",
            query: {
                id: id
            }
        })
    }else if(status==20||status==30){
        router.push({
            name: "ReceiveTj",
            query: {
                id: id,
                status:status
            }
        })
    }
}





</script>

<style></style>